<!doctype html>
<html lang="zh_en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>观察者模式</title>
</head>
<style>
    .obs_btn {
        border: 1px solid #f2f2f2;
        width: 60px;
        height: 30px;
        background: #f2f2f2;
    }

    .obs_btn_atc {
        border: 1px solid lightblue;
        background: lightblue;
    }
    #ct {
        display: none;
    }
    #content_div, #content_div div{
        margin: 0 auto;
        /*text-align: center;*/
    }
    .tips {
        margin: 10px;
        display: inline-block;
        width: 650px;
        text-align: right;
        color: #ff6700;
    }
    #per {
        padding: 5px;
        margin: auto 10px;
        width: 15%;
    }
    #content {
        display: inline-block;
        vertical-align: top;
    }
    #sel2 {
        display: none;
    }
</style>
<body>


<div id="content_div">

    <div style="margin-bottom: 40px;">
        <span class="tips">被观察者(Subject)</span><span> - 主体下拉列表:</span>
        <select name="" id="per">
            <option value="0">----</option>
            <option value="1">司寇旗</option>
            <option value="2">庄叔</option>
            <option value="3">郁泽</option>
            <option value="4">罗珠</option>
        </select>
    </div>

    <br>
    <div>
        <span class="tips">观察者1(btnObserver)</span><span> - 激活对应button:</span>
        <button class="obs_btn">司寇旗</button>
        <button class="obs_btn">庄叔</button>
        <button class="obs_btn">郁泽</button>
        <button class="obs_btn">罗珠</button>
    </div>
    <div>
        <span class="tips">观察者2(optionObserver)</span><span> - 显示input内容:</span>
        <select name="" id="sel1" disabled>
            <option value="0" selected>----</option>
            <option value="1">功法</option>
            <option value="2">法宝</option>
            <option value="3">灵丹</option>
            <option value="4">神兽</option>
            <option value="5">势力</option>
        </select>

        <select name="" id="sel2">
            <option value="0"></option>
        </select>
        <input type="text" id="input1">
    </div>
    <div>
        <span class="tips">观察者3(showObserver)</span><span> - 显示对应text:</span>
        <div id="content"></div>
    </div>

</div>


</body>
<script>

	let subDom = document.getElementById('subject');

	let sel1 = document.getElementById('sel1');
	let sel2 = document.getElementById('sel2');
	let selPer = document.getElementById('per');
	let content = document.getElementById('content');
	let input1 = document.getElementById('input1');
	let obs_btns = document.getElementsByClassName('obs_btn');
	let preBtns = Array.prototype.slice.call(obs_btns);
	let ct = document.getElementById('ct');


	class Observer {
		constructor(id, fn) {
			this.id = id; // 识别标记, 用于退订(解绑)
			this.fn = fn; // 对应要执行的动作
		}

		subscribe(sub) {
			sub.subscribe(this)
        }

		execute(val) {
			this.val = val;
			this.fn(val)
		};
    }


	class TaskList {
		constructor() {
			this.taskList = []; // 记录每一个观察的人
		}

		getCount() {
			return this.taskList.length;
		};

		get(index) {
			return this.taskList[index];
		};

		add(obj) {
			return this.taskList.push(obj); // 添加到任务列表, 即订阅
		};

		remove(id) {
			this.taskList = this.taskList.filter(ob => ob.id !== id);  // 从任务列表移除, 即退订
		};
	}


	// 被观察者
	class Subject {
		constructor() {
			this.subTasks = []; // 当前被观察者的任务队列
		}

		subscribe(task) {
			this.subTasks.push(task); // 当前被观察者订阅
		}

		unSubscribe(task) {
			this.subTasks = this.subTasks.filter(ob => ob.id !== task.id);  // 从任务列表移除, 即退订
//			this.subTasks.remove(task); // 当前被观察者退订
		};

		// 发布
		notify(val) {
			this.subTasks.map(item => item.fn(val))
		};
	}


	const perSubject = new Subject();


	var btnObserver = new Observer(1001, activePer); // 按钮观察者
	var optionObserver = new Observer(1002, function (r) {
        // 显示下拉列表
		firstOptions(r);
		selSecondOptions(r)
	}); // 下拉列表观察者
	var showObserver = new Observer(1003, function (r) {
		let eq = createEq(r)
		let c = createContent(r)
		showContent(eq, c)
	}); // 显示观察者


    // 订阅
	perSubject.subscribe(btnObserver)
	perSubject.subscribe(optionObserver)
	perSubject.subscribe(showObserver)

	selPer.addEventListener('change', function (ev) {
		const val = this.value;
		if (val) perSubject.notify(val);
	});

	function activePer(idx) {
		preBtns.map(item => {
			item.classList.remove('obs_btn_atc');
        })
		preBtns[idx-1].click();
	}

	function createEq(idx) {
        console.log(idx)
		const eqs = [
			['功法', '雀羽虎尾禁轴', '落花赤炎灵诀', '飞狼本无奇书', '玄光重生秘抄'],
			['法宝', '七圣今珠戟', '红炎佛星伞', '造化名尘铲', '如来粗火锥'],
			['灵丹', '原始破障圣丹', '天妖培婴禁丹', '太始忘尘金丹', '五行祛邪回丹'],
			['神兽', '绝代绿震龙', '夺命圣蕊驹', '绣金靛毁雁', '龙鳞绿秀凤'],
			['势力', '玄阴剑派', '天网教', '斩日峰', '地藏舫']
        ]

        let eq = '';
        eqs.map(item => {
        	eq += `<br>${item[0]}: ${item[idx]}`;
        })

        return eq;
    }

	function createContent() {

		const c = [
			'中有万鬼群，微摆撼天柱',
			'风府通天，左右辘轳转',
			'鬼道相连，鼓漱三十六',
			'体入自然，日月失昏',
			'气游关元，四时失度',
			'度者几人，凡有此灾',
			'引体真气，如此三度毕',
			'身度我界，叩齿三十六',
			'梵行诸天，四时失度',
			'斩馘六鬼锋，至圣神人'
        ];
		console.log(Math.random().toFixed(1)*10)
		return c[(Math.random() * (10 - 0)).toFixed(0)];

    }

	function showContent(eq, c) {
		content.innerHTML = `${eq}<br> 他念道；  ${c}`;
    }



	preBtns.map((item, idx) => {
		item.addEventListener('click', function (ev) {
			let isHasClass = ev.target.className === 'obs_btn' ? true : false;
			ev.target.classList.remove('obs_btn_atc');

			if (isHasClass) ev.target.classList.add('obs_btn_atc');
		})
	})

    function firstOptions() {
        var a = ['招式'];
	    let html = '';
	    a.map((item, idx) => {
		    html += `<option value="${idx}">${item}</option>`
	    });

	    sel1.innerHTML = html;
    }

	function selSecondOptions(value) {
		const val = value;
		/*let valType = {
			1: ['雀羽虎尾禁轴', '落花赤炎灵诀', '飞狼本无奇书', '玄光重生秘抄'],
			2: ['七圣今珠戟', '红炎佛星伞', '造化名尘铲', '如来粗火锥'],
			3: ['原始破障圣丹', '天妖培婴禁丹', '太始忘尘金丹', '五行祛邪回丹'],
			4: ['绝代绿震龙', '夺命圣蕊驹', '绣金靛毁雁', '龙鳞绿秀凤'],
			5: ['玄阴剑派', '天网教', '斩日峰', '地藏舫']
		};*/
		let tricks = [
			'般若爪', '真火龙腿', '摧魂咒', '狂龙破', '玄炎闪', '还神佛杀', '千里步', '鬼神爪', '无极魔劲',
			'紫霜皇掌', '巨鲨佛劈', '千虫吟', '护体佛劈', '莲妖指', '断岳手', '赤炎剑', '狂涛掌', '飘雪闪',
			'杀妖拳', '寰宇步', '哭魂吟', '摧日佛舞', '六爻变', '圣天霸破', '四方变', '灵龙佛咒', '紫霞咒',
			'鱼龙瘴', '先天圣雷', '赤日斧', '飞星雷', '蟠龙魔封', '蟠龙佛劲', '吹雪拳', '血焰枪', '圆通咒',
			'金刚龙指', '精铜皇劲', '绿玉神闪', '万雷闪', '菩提魔劈', '妖魔指', '清静解', '日扬龙隐', '兽皇爆', '龙凰劲',
			'一炬佛手', '地缚掌', '雷风变', '琼浆吟', '玄龟雷', '金仙枪', '龙胆咒', '白虎法', '映月霸腿'
		];

		let num = Math.random().toFixed(4);
		let tArr = [null, null];
		console.log(num);
		console.log(tArr);
		let html = '';
		tArr.some((item, idx) => {
			let random = Math.random() * (55 - 0);
			console.log(random.toFixed(0))
			tArr[idx] = tricks[random.toFixed(0)]
			html += `<option value="${val}${idx}">${tricks[random.toFixed(0)]}</option>`
		});


		sel2.innerHTML = html;
		input1.value = tArr.join(', ');

		submit(value)

	}

	function con(value) {
		console.log('Task ' + this.id + ' load data from ' + value);
	}

	function submit(value) {
		console.log(perSubject.subTasks.taskList)
		content.innerHTML += `${value} has ${sel2.options[sel2.selectedIndex].text} <br>`
	}



</script>
</html>
